<template>
	<view>
		<headerVue transparent="1" title="二维码" />
		
		<view class="wrap">
			<view class="tip">链接:</view>
			<input type="text" v-model="url" placeholder="请输入需要生成二维码的链接">
			<view class="center">
				<button class="btn" @click="setQrcode">
					生成二维码
				</button>
				<checkbox-group class="group" @change="changeLogo">
					<checkbox 
						value="1" 
						activeBackgroundColor="#39c5bb"
						activeBorderColor="#39c5bb"
						iconColor="#fff"
					/>是否展示LOGO
				</checkbox-group>
			</view>
			<qrcodeVue
				class="qrcode"
				cid="qrcode1" 
				ref="qrcode" 
				:isLogo="isLogo"
				:val="val" 
				:size="size" 
				:foreground="foreground" 
				:pdground="pdground" 
				:onval="onval" 
			/>
		</view>
	</view>
</template>

<script>
	import qrcodeVue from "../../components/qrcode/qrcode.vue";
	import headerVue from '../../components/header.vue';
	export default{
		components:{
			qrcodeVue,
			headerVue
		},
		data(){
			return {
				isLogo: false,
				val: '二维码', // 要生成的二维码值
				size: 400, // 二维码大小
				background: '#fff', // 背景色
				foreground: '#39c5bb', // 前景色
				pdground: '#39c5bb', // 角标色
				iconsize: 40, // 二维码图标大小
				onval: true, // val值变化时自动重新生成二维码
				url: ''
			}
		},
		methods:{
			changeLogo({ detail: { value }}){
				this.isLogo = !!value.length
			},
			setQrcode(){
				if (!this.url){
					this.$tip.toast('请先填写URL')
					return
				}
				this.val = ''
				this.$nextTick(() => {
					this.val = this.url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.qrcode{
		text-align: center;
		margin-top: 72rpx;
	}
	.center{
		text-align: center;
		.btn,
		.group{
			display: inline-block;
			margin-top: 0;
			vertical-align: middle;
		}
		.group{
			margin-left: 24rpx;
		}
	}
	.wrap{
		margin: 24rpx;
		padding: 30rpx 30rpx 60rpx;
		border-radius: 12rpx;
		background-color: #fff;
		input{
			border: 1rpx solid #e0e0e0;
			margin: 24rpx 0;
			padding: 12rpx;
			border-radius: 12rpx;
		}
	}
</style>